<template>
  <form action="" @submit.prevent="formHandler">
    <input type="text" placeholder="收入描述..." v-model="formData.desc" required>
    <input type="number" placeholder="金额..." v-model="formData.value" required>
    <input type="date" placeholder="日期..." v-model="formData.date" required>
    <input type="submit" value="添加">
  </form>
</template>

<script lang="ts" setup>
import { reactive, defineProps, defineEmits } from 'vue'

defineProps({
  state: {
    type: Object
  }
})

const emit = defineEmits(['add-income'])

const formData = reactive({
  desc: null,
  value: null,
  date: null
})

const formHandler = () => {
  emit('add-income', {
    desc: formData.desc,
    value: formData.value,
    date: formData.date
  })
  formData.desc = null
  formData.value = null
  formData.date = null
}
</script>

<style lang="scss" scoped>
form {
  display: flex;
  justify-content: center;
  margin-top: top;
}

form input {
  color: #888;
  border: none;
  outline: none;
  font-size: 20px;
}

form input::placeholder {
  color: #aaa;
}

form input:not([type="submit"]) {
  display: block;
  background: #fff;
  border: none;
  outline: none;
  padding: 5px 15px;
}

form input[type="submit"] {
  display: block;
  background: none;
  border: none;
  outline: none;

  color: #fff;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  padding: 5px 15px;
  background-color: #ffce00;

  cursor: pointer;
}

form input:frist-of-type {
  border-radius: 8px 0 0 8px;
}

form input:last-of-tpye {
  border-radius: 0 8px 8px 0;
}
</style>
